<template>
  <el-form ref="form" :model="form" label-width="100px" style="display: inline-block"  :hide-required-asterisk="true" :show-message="false">
    <el-form-item label="供应商编号:" prop="name" style="display: inline-block">
      <el-input type="input" maxlength="20" disabled="disabled" v-model="form.serialNumber"></el-input>
    </el-form-item>
    <el-form-item required label="供应商名称:"   prop="name" style="display: inline-block">
      <el-input type="input" maxlength="20" v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item required label="供应商类型:"  prop="categoryId" style="display: inline-block">
      <el-select clearable v-model="form.categoryId" placeholder="请选择供应商类型" style="width: 185px;">
        <el-option
          v-for="item in menus"
          :key="item.id"
          :value="item.id"
          :label="item.content"
        />
      </el-select>
    </el-form-item>
    <el-form-item  label="联系人:" prop="contactName" style="display: inline-block">
      <el-input type="input" maxlength="20" v-model="form.contactName"></el-input>
    </el-form-item>
    <el-form-item  label="联系电话:" prop="contactPhoneNumber" style="display: inline-block">
      <el-input type="input" maxlength="20" v-model="form.contactPhoneNumber"></el-input>
    </el-form-item>
    <el-form-item  label="联系地址:" prop="contactAddress" style="display: inline-block">
      <el-input type="input" maxlength="20" v-model="form.contactAddress"></el-input>
    </el-form-item>
    <el-form-item  label="邮编:" prop="postcode" style="display: inline-block">
      <el-input type="input" maxlength="20" v-model="form.postcode"></el-input>
    </el-form-item>
    <el-form-item  label="Email:" prop="contactAddress" style="display: inline-block">
      <el-input type="input" maxlength="20" v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item  label="传真:" prop="email" style="display: inline-block">
      <el-input type="input" maxlength="20" v-model="form.fax"></el-input>
    </el-form-item>
    <el-form-item  label="开户银行:" prop="bank" style="display: inline-block">
      <el-input type="input" maxlength="20" v-model="form.bank"></el-input>
    </el-form-item>
    <el-form-item  label="银行账号:" prop="bankAccountNumber" style="display: inline-block">
      <el-input type="input" maxlength="20" v-model="form.bankAccountNumber"></el-input>
    </el-form-item>
    <el-form-item  label="账户名称:" prop="bankAccountNumber" style="display: inline-block">
      <el-input type="input" maxlength="20" v-model="form.bankAccountName"></el-input>
    </el-form-item>
    <el-form-item  label="创建日期:" prop="bankAccountNumber" style="display: inline-block">
      <el-input type="text"  disabled="disabled" maxlength="20" v-model="form.createdTime"></el-input>
    </el-form-item>
    <el-form-item  label="主营产品:" prop="product" style="display: inline-block">
      <el-input type="input" maxlength="50" v-model="form.product"></el-input>
    </el-form-item>
    <el-form-item label="供应商备注:">
      <el-input type="textarea" maxlength="200" :autosize="{ minRows: 3, maxRows: 6}" v-model="form.note"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button style="margin-left: 43%" size="small" round  type="primary" @click="onSubmit">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    name: 'DialogDataForm',
    props: {
      value: {
        type: Object,
        default: () => ({
          serialNumber: '',
          name: '',
          categoryId: 0,
          contactName: '',
          contactPhoneNumber: '',
          contactAddress: '',
          postcode: '',
          email: '',
          bank: '',
          fax:'',
          bankAccountNumber: '',
          bankAccountName: '',
          product: '',
          note: '',
          createdTime: ''
        })
      },
      menus: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        showCommunitySelector: true,
        showBuildingInput: true,
        form: {
          serialNumber: this.value.serialNumber,
          name: this.value.name,
          categoryId: this.value.categoryId,
          contactName: this.value.contactName,
          contactPhoneNumber: this.value.contactPhoneNumber,
          contactAddress: this.value.contactAddress,
          postcode: this.value.postcode,
          email: this.value.email,
          fax: this.value.fax,
          bank: this.value.bank,
          bankAccountNumber: this.value.bankAccountNumber,
          bankAccountName: this.value.bankAccountName,
          product: this.value.product,
          note: this.value.note,
          createdTime: this.value.createdTime
        },
        rules: {
          name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
          categoryId: [
            { required: true, message: '请选择供应商类型', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
    },
    methods: {
      onSubmit() {
        this.$refs.form.validate(valid => {
          if (valid) {
            const options = {
              serialNumber: this.form.serialNumber,
              name: this.form.name,
              categoryId: this.form.categoryId,
              contactName: this.form.contactName,
              contactPhoneNumber: this.form.contactPhoneNumber,
              contactAddress: this.form.contactAddress,
              postcode: this.form.postcode,
              email: this.form.email,
              bank: this.form.bank,
              fax: this.form.fax,
              bankAccountNumber: this.form.bankAccountNumber,
              bankAccountName: this.form.bankAccountName,
              product: this.form.product,
              note: this.form.note
            }
            if (!this.value.id) {
              this.$emit('operate', options, 'send')
            } else {
              options.id = this.value.id
              this.$emit('operate', options, 'update')
            }
          } else {
            return false
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
</style>
